<template>
  <div class="rank-card">
    <div
      class="card-top"
      :style="{
        background:
          'url(' + cards.coverImgUrl + ') no-repeat 0 -65px/300px 215px',
        height: '90px'
      }"
    >
      <span class="card-time"
        >{{ $filters.formatTime(cards.updateTime) }}更新</span
      >
      <el-icon class="top-play" @click="playMusic(cards.children[0], 0)"
        ><caret-right
      /></el-icon>
    </div>
    <div class="card-table">
      <div
        class="card-row"
        v-for="(item, index) in cards.children"
        :key="item.id"
        :class="[currentIndex === index ? 'card-active' : '']"
        @click="handle(index)"
        @dblclick.stop="playMusic(item, index)"
      >
        <div class="card-left">
          <div class="card-num">{{ index + 1 }}</div>
          <div class="card-song text-full-hidden">{{ item.name }}</div>
          <div class="card-lafter text-full-hidden">
            {{ item.alia[0] === undefined ? '' : '(' + item.alia[0] + ')' }}
          </div>
        </div>
        <div class="card-sing text-full-hidden">{{ item.ar[0].name }}</div>
      </div>
    </div>
    <div class="card-bottom" style="padding: 10px">
      <a
        style="color: #999; fontsize: 12px"
        href="#"
        @click.prevent="togSongList"
        >查看全部＞</a
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const props = defineProps({
  cards: {
    type: Object,
    default: () => ({})
  },
  id: {
    type: Number,
    default: 0
  }
})
const router = useRouter()
const store = useStore()
const currentIndex = ref(0)
const handle = (index: number) => {
  currentIndex.value = index
}
const playMusic = (row: any, i: number) => {
  store.dispatch('music/playMusic', row)
  store.commit('music/updatePlayIndex', i)
  store.commit('music/updateMusicList', props.cards.children)
}
const togSongList = () => {
  router.push('/main/songsheet' + props.cards.id)
}
</script>

<style scoped>
.card-bottom {
  display: flex;
  justify-content: flex-end;
  background: #f5f5f7;
}
.card-lafter {
  max-width: 100px;
  font-size: 12px;
  color: #999;
}
.card-song {
  color: #666;
  font-size: 13px;
  max-width: 100px;
}
.card-sing {
  max-width: 80px;
  font-size: 12px;
  margin-right: 5px;
  font-size: 14px;
  color: #999;
}
.card-num {
  font-size: 18px;
  color: red;
  font-weight: bold;
}
.card-hot {
  font-size: 13px;
  color: #333;
}
.card-left {
  display: flex;
  justify-content: space-around;
}
.card-left > div {
  margin-right: 2px;
  margin-left: 5px;
}
.card-row {
  display: flex;
  justify-content: space-between;
  height: 30px;
  width: 100%;
  line-height: 30px;
  background: #fafafa;
  cursor: pointer;
  user-select: none;
}
.card-table .card-row:hover {
  background: #ebeced;
}
.card-row:nth-of-type(2n) {
  background: #f5f5f7;
}
.card-table .card-active {
  background: #e3e3e5;
}
.card-table .card-active .card-sing,
.card-table .card-active .card-lafter {
  color: #333;
}
.card-top {
  position: relative;
}
.card-top img {
  width: 100%;
}
.card-time {
  position: absolute;
  bottom: 8px;
  left: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.top-play {
  font-size: 20px;
  padding: 5px;
  color: #fff;
  position: absolute;
  bottom: 5%;
  left: 87%;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}
.rank-card {
  width: 300px;
  border: 1px solid #ccc;
  position: relative;
  margin-top: 20px;
}
</style>
